<template>
  <app-view>
    <!-- 标题栏 -->
    <van-nav-bar :border="false" left-text="选择" left-arrow @click-left="onClickLeft" />
    <!-- 列表数据 -->
    <children-list :data-list="childrenList" @on-item-click="onClickItem" />
  </app-view>
</template>

<script>
  import ChildrenList from './components/children-list';
  import { getUserInfo } from '@utils/auth';
  import { mapGetters } from 'vuex';
  import { qryChildrenList } from '@api/mine';

  export default {
    name: 'children-info-list',
    components: { ChildrenList },
    data() {
      return {
        childrenList: [] // 展示的列表数据
      };
    },
    computed: { ...mapGetters('app', ['keepAlive']) },
    mounted() {
      const _this = this;
      _this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      });
      setTimeout(() => {
        _this.getChildrenList();
      }, 300);
    },
    methods: {
      onClickLeft() {
        this.$router.push('../user');
      },
      // 点击-列表单项-查看详情
      onClickItem(item) {
        this.$router.push({
          path: './children-info',
          query: item
        });
      },
      // --------------------请求后台的方法--------------------
      // 查询孩子列表
      getChildrenList() {
        const _self = this;
        const placeUserId = getUserInfo().placeUserId;
        qryChildrenList(placeUserId)
          .then((res) => {
            _self.$toast.clear();
            if (res.success) {
              _self.childrenList = res.data.zyUserStudentQueryRespIOS;
            } else {
              _self.$toast(res.msg);
            }
          })
          .finally(() => _self.$toast.clear());
      }
    },
    beforeRouteLeave(to, from, next) {
      const _this = this;
      const keepAliveArr = _this.keepAlive;
      if (to.path === '/user/children-info') {
        if (!keepAliveArr.includes('children-info-list')) {
          keepAliveArr.push('children-info-list'); // 添加
          _this.$store.commit('app/setKeepAlive', keepAliveArr);
        }
      } else {
        if (keepAliveArr.includes('children-info-list')) {
          keepAliveArr.splice(keepAliveArr.indexOf('children-info-list'), 1); // 删除
          _this.$store.commit('app/setKeepAlive', keepAliveArr);
        }
      }
      next();
    }
  };
</script>

<style scoped lang="less">
  @import '~@styles/var';
  @import '~@styles/modules/visitor/van-popup';
  @import '~@styles/modules/visitor/arrow-rotate';
  .app-view {
    background: #fff;
  }
  .app-view > .scroll-view {
    height: calc(100% - 44px);
  }
</style>
